<template>
  <div class="roster-container">
    <div class="guide">
      <div class="guide-title flex-box">
        <h3>使用指南</h3>
        <a href class="none close-guide">关闭指南</a>
      </div>
      <p class="guide-item">1、通常企业可以通过工作内容、工作性质不同，将常见岗位分为几个类别进行归类管理。</p>
      <p class="guide-item">2、如果您的企业规模较大，已经维护了完善的岗位类别或职务体系，可作为后续职员管理，绩效评估，薪资体系建立，招聘选拔的基础和依据。</p>
      <p class="guide-item">3、没有添加岗位类别的岗位将转移到【未分类】类别中。</p>
    </div>
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex"></div>
      <div class="right flex">
        <Button type="success" class="add-btn" @click="addPostType">新增岗位类别</Button>
        <!-- <Dropdown style="margin-left: 20px">
          <Button class="more-btn">
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>批量删除员工</DropdownItem>
            <DropdownItem>回收站</DropdownItem>
          </DropdownMenu>
        </Dropdown>-->
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="postTypeList" class="table6" :loading="tableLoading"></Table>
      </div>
    </div>

    <!-- 快速编辑end -->

    <!-- modal -->
    <Modal v-model="addModal" title="新增岗位类别">
      <div class="modal-body">
        <Form :model="formItem" :label-width="120" ref="addPostType" :rules="ruleValidate">
          <FormItem label="名称" prop="post_type_name">
            <Input v-model="formItem.post_type_name" placeholder="请输入..." class="modal-input"></Input>
          </FormItem>
          <FormItem label="岗位类别编码">
            <Input v-model="formItem.post_type_code" placeholder="请输入..." class="modal-input"></Input>
          </FormItem>
          <FormItem label="描述">
            <Input
              v-model="formItem.post_type_description"
              type="textarea"
              placeholder="请输入..."
              class="modal-input"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="text" @click="cancel">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </div>
    </Modal>

    <!-- <Modal v-model="deleteModal" width="360">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-information-circle"></Icon>
            <span>删除确认</span>
        </p>
        <div style="text-align:center">
            <p>确定要删除该类别的岗位吗</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
        </div>
    </Modal>-->
    <!-- modal end -->
  </div>
</template>
<script>
import { org } from "@/apis";
import http from "@/utils/http";
export default {
  name: "list",
  data() {
    return {
      columns: [
        {
          title: "岗位类别",
          key: "post_type_name",
          width: 260
        },
        {
          title: "岗位类别编码",
          key: "post_type_code"
        },
        {
          title: "岗位数",
          key: "province"
        },
        {
          title: "在职员工数",
          key: "city"
        },
        // {
        //   title: "职级范围",
        //   key: "city"
        // },
        // {
        //   title: "职等范围",
        //   key: "city"
        // },
        {
          title: "描述",
          key: "post_type_description"
        },
        {
          title: " ",
          key: "action",

          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center"
                },
                class: "table-btns-wrap"
              },
              [
                h(
                  "span",
                  {
                    props: {
                      type: "text"
                    },
                    class: "table-action-btn",
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "span",
                  {
                    props: {
                      type: "text"
                    },
                    class: "table-action-btn",
                    on: {
                      click: () => {
                        this.delete(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]
            );
          }
        }
      ],
      deleteModal: true,
      addModal: false,
      postTypeList: [], //岗位类别列表
      openTableTitle: false,
      loading: true,
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      ruleValidate: {
        post_type_name: [
          {
            required: true,
            message: "请输入岗位类别名称",
            trigger: "blur"
          }
        ]
      },
      tableLoading: false
    };
  },
  methods: {
    triggerTableTitle() {
      this.openTableTitle = true;
    },
    cancleTableTitle() {
      this.openTableTitle = false;
    },
    saveTableTitle() {
      this.openTableTitle = false;
    },
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },
    openRightCard(a, b) {
      this.rightCardCloseStatus = true;
    },
    multiEditing() {
      console.log(1);
      console.log(this.columns[0].type);
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },
    addEmployee() {
      this.$router.push("/personnel/relation/enrollment/add/employee");
    },
    // 获取岗位类型列表
    getPostTypeList() {
      this.tableLoading = true;
      http
        .get(org.posttypelist, {params:{limit:1000}})
        .then(res => {
          console.log("岗位类别列表", res);
          this.postTypeList = res.data.list.data;
          this.tableLoading = false;
        })
        .catch(error => {
          this.tableLoading = false;
          this.$Message.error(error);
        });
    },
    ok() {
      this.$refs["addPostType"].validate(valid => {
        if (valid) {
          console.log(this.formItem);
          let _this = this;
          http
            .post(org.posttypecreate, { data: { ...this.formItem } })
            .then(res => {
              _this.$Message.success("添加成功!");
              _this.getPostTypeList();
              setTimeout(() => {
                _this.addModal = false;
              }, 1500);
            })
            .catch(error => {
              this.$Message.error(error);
            });
        } else {
          // this.$Message.error('Fail!');
        }
      });
    },
    cancel() {
      this.addModal = false;
    },
    addPostType() {
      this.addModal = true;
    },
    edit(e) {
      this.formItem = e;
      this.addModal = true;
    },
    delete(e) {
      let _this = this;
      this.$Modal.confirm({
        title: "删除岗位类别",
        content: "删除后，该岗位类别将不能使用",
        loading: true,
        onOk: () => {
          http
            .get(org.posttypedelete, {
              params: {
                post_type_id: e.post_type_id
              }
            })
            .then(res => {
              _this.$Message.success("删除成功！");
              _this.$Modal.remove();
              _this.getPostTypeList();
            })
            .catch(error => {
              _this.$Message.error(error);
              _this.$Modal.remove();
            });
        }
      });
    }
  },
  mounted() {
    this.getPostTypeList();
  }
};
</script>
<style lang="scss" scoped src="./index.scss"></style>